<template>
<div>
  <a-modal v-model="visible" title="" @cancel="handleOk">
    <a-tabs default-active-key="1" @change="callback" class="table">
      <a-tab-pane key="1" tab="普通登录">
        <a-form id="components-form-demo-normal-login" :form="form" class="login-form"
                @submit="submit">
          <a-form-item>
            <a-input v-decorator="['userName', { rules: [{ required: true, message: '输入账号' }] }, ]"
                     placeholder="账号">
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-decorator="[ 'passWord',{ rules: [{ required: true, message: '输入密码' }] },]"
                     type="password" placeholder="密码">
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
            </a-input>
          </a-form-item>
          <a-form-item>

            <a-button type="primary" html-type="submit" class="login-form-button">
              登录
            </a-button>

           <div class="loginB">
             <a class="login-form-forgot" href="">
               立即注册!
             </a>
             <a class="login-form-forgot" href="">
               忘记密码?
             </a>
           </div>
          </a-form-item>
        </a-form>

      </a-tab-pane>
      <a-tab-pane key="2" tab="手机登录" force-render>
        <div class="login"><a-icon type="user" /><input type="text" placeholder="请输入账号"></div>
        <div  class="loginP" >
          <div class="login1"><a-icon type="lock" /><input type="text" placeholder="请输入密码"></div>
          <div>获取验证码</div>
        </div>
        <button>提交</button>
        <nav><span>立即注册!</span><span>忘记密码?</span></nav>
      </a-tab-pane>

    </a-tabs>
    </a-modal>
</div>
</template>

<script>
// import {loginDetail} from "@/api/api";
export default {
name: "view",
  data(){
    return{
      // visible: false,
      //


    }
  },
  methods:{

    handleOk() {
      this.$store.commit("changeMT", false)

    },
    callback(key) {
      console.log(key);
    },
    submit(e){
      console.log(e)
      e.preventDefault();

      this.form.validateFields((err, values) => {

        if(!err) {
          console.log('Received values of form: ', values);
          this.$store.dispatch("getIsLogin", values)
        }
      })
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {
      name: "normal_login",
    });
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.showHide
      },
      set() {
      }
    }
  }
}
</script>

<style scoped lang="less">
.table {
  width: 400px;
  height: 300px;
  button{
    width: 100px;
    height: 30px;
    background: #00d086;
    margin-top: 40px;
    margin-left: 150px;
  }

  nav{
    display: flex;
    margin-top: 10px;
    justify-content: space-around;
  }
}
/deep/.ant-modal-footer{
  display: none;
}
.login ,
.login1{
  padding: 0 20px ;
  width: 300px;
  margin:20px auto;
  height: 30px;
  border: 1px solid black;
  input{
    outline: none;
    border: none;
    margin-left: 10px;

  }
}
.login1{
  width: 234px;

  input{
    width: 150px;
  }
}
.loginB {
  display: flex;
  justify-content: space-around;
}
.loginP{
  width: 300px;
  display: flex;
  margin: auto;
  div:nth-child(2){
    height: 26px;
    padding: 2px;
    font-size: 12px;
    margin-top: 22px;
    background: #00d086;
    color: white;
  }
}
</style>